<template>
  <div class="step1">
    <a-form-model ref="form" :model="form.estimateMainQuestion" :label-col="{span: 6}" :wrapper-col="{span: 18}">
      <a-row>
        <!-- 基本信息 -->
        <a-col :span="24">
          <div class="title">基本信息（必填）</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="人员姓名">
                <a-input v-model="form.realName" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="身份证号">
                <a-input v-model="form.identityCard" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="人员类型">
                <a-select v-model="form.sjskType" placeholder="请选择" disabled>
                  <a-select-option value="1">
                    社区戒毒
                  </a-select-option>
                  <a-select-option value="2">
                    社区康复
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 社会支持网络分析 -->
        <a-col :span="24">
          <div class="title">社会支持网络分析</div>
          <a-form-model-item label="社会系统图示" :label-col="{span: 3}" :wrapper-col="{span: 21}">

          </a-form-model-item>
          <a-form-model-item label="社会生态系统及说明" :label-col="{span: 3}" :wrapper-col="{span: 21}">
            <a-textarea v-model="form.estimateMainQuestion.societyEcologicalExplain"
              :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
          <a-divider dashed />
        </a-col>
        <!-- 案主表征及主诉问题/需求 -->
        <a-col :span="24">
          <div class="title">案主表征及主诉问题/需求</div>
          <a-form-model-item label="案主目前对吸食毒品的态度/看法" :label-col="{span: 5}" :wrapper-col="{span: 19}">
            <a-textarea v-model="form.estimateMainQuestion.attitude" :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
          <a-form-model-item label="案主曾做过的努力和成功经验" :label-col="{span: 5}" :wrapper-col="{span: 19}">
            <a-textarea v-model="form.estimateMainQuestion.successExperience" :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
          <a-form-model-item label="是否呈现需要及时处理的问题" :label-col="{span: 5}" :wrapper-col="{span: 19}">
            <a-checkbox-group v-model="form.estimateKeywordList[0].value" :options="form.estimateKeywordList[0].options" />
            <a-input style="width: 150px" v-model="form.estimateKeywordList[0].remark"></a-input>
          </a-form-model-item>
          <a-form-model-item label="案主主诉问题或需求" :label-col="{span: 5}" :wrapper-col="{span: 19}">
            <a-textarea v-model="form.estimateMainQuestion.question" :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
          <a-divider dashed />
        </a-col>
        <!-- 评估服务需要 -->
        <a-col :span="24">
          <div class="title">评估服务需要</div>
          
          <a-form-model-item :label="item.keyword" :label-col="{span: 4}" :wrapper-col="{span: 20}" v-for="(item, index) in form.estimateKeywordList" :key="index" v-if="index > 0">
            <a-checkbox-group v-model="item.value" :options="item.options" />
            <a-input style="width: 150px" v-model="item.remark"></a-input>
          </a-form-model-item>
          <a-form-model-item label="其他需要说明的事项" :label-col="{span: 4}" :wrapper-col="{span: 20}">
            <a-textarea v-model="form.estimateMainQuestion.otherExplain" :auto-size="{ minRows: 4, maxRows: 6 }" />
          </a-form-model-item>
          <a-divider dashed />
        </a-col>
        <!-- 社工意见（必填） -->
        <a-col :span="24">
          <div class="title">是否跟进</div>
          <a-form-model-item label="是否跟进" :label-col="{span: 3}" :wrapper-col="{span: 21}" prop="isFollow" :rules="{required: true, message: '请选择是否跟进', trigger: ['blur']}">
            <a-radio-group v-model="form.estimateMainQuestion.isFollow" :options="sfgj" />
            <a-input style="width: 150px" v-model="form.estimateMainQuestion.reasonFollow"></a-input>
          </a-form-model-item>
          <a-form-model-item label="是否紧急" :label-col="{span: 3}" :wrapper-col="{span: 21}" prop="isUrgency" :rules="{required: true, message: '请选择是否紧急', trigger: ['blur']}">
            <a-radio-group v-model="form.estimateMainQuestion.isUrgency" :options="sfjj" />
            <a-input style="width: 150px" v-model="form.estimateMainQuestion.reasonUrgency"></a-input>
          </a-form-model-item>

        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.form)
      const query = this.$route.query
      Object.assign(this.form, query)
    },
    data() {
      return {
        form: {
          realName: '',
          identityCard: '',
          sjskType: '',
          estimateMainQuestion: {
            "attitude": "",
            "isFollow": '',
            "isUrgency": '',
            "otherExplain": "",
            "question": "",
            "reasonFollow": "",
            "reasonUrgency": "",
            "sjskPersonId": 0,
            "societyEcologicalExplain": "",
            "successExperience": "",
            "supervisorOpinion": "",
          },
          estimateKeywordList: [
            {
              "keyword": "是否呈现需要及时处理的问题",
              "remark": "",
              "sjskPersonId": '',
              "type": 1,
              "value": [],
              options: [{
                  label: '明显的精神疾病状况',
                  value: 1
                },
                {
                  label: '有明显的身体健康问题',
                  value: 2
                },
                {
                  label: '过往一个月内有自杀的念头',
                  value: 3
                },
                {
                  label: '家庭关系紧张',
                  value: 4
                },

                {
                  label: '其他',
                  value: 5
                },
              ]
            },
            {
              "keyword": "生理脱毒（毒品相关）情况",
              "remark": "",
              "sjskPersonId": '',
              "type": 2,
              "value": [],
              options: [{
                  label: '生理断瘾',
                  value: 1
                },
                {
                  label: '断瘾治疗',
                  value: 2
                },
                {
                  label: '对毒品的正负信念',
                  value: 3

                },
                {
                  label: '其他',
                  value: 4
                },
              ]
            },
            {
              "keyword": "身心康复情况",
              "remark": "",
              "sjskPersonId": '',
              "type": 3,
              "value": [],
              options: [{
                  label: '身体健康问题',
                  value: 1
                },
                {
                  label: '精神问题',
                  value: 2
                },
                {
                  label: '心理及情绪问题',
                  value: 3
                },
                {
                  label: '渴望改善家庭关系',
                  value: 4
                },

                {
                  label: '改变动机',
                  value: 5
                },
                {
                  label: '其他',
                  value: 6
                },
              ]
            },
            {
              "keyword": "行为表现情况",
              "remark": "",
              "sjskPersonId": '',
              "type": 4,
              "value": [],
              options: [{
                  label: '接受管控状态',
                  value: 1
                },
                {
                  label: '进行康复训练',
                  value: 2
                },
                {
                  label: '远离及检举违法活动',
                  value: 3
                },

                {
                  label: '其他',
                  value: 4
                },
              ]
            },
            {
              "keyword": "社会环境与适应能力",
              "remark": "",
              "sjskPersonId": '',
              "type": 5,
              "value": [],
              options: [{
                  label: '家庭关系问题',
                  value: 1
                },
                {
                  label: '人际关系问题',
                  value: 2
                },
                {
                  label: '经济问题',
                  value: 3
                },
                {
                  label: '就业/就学问题',
                  value: 4
                },
                {
                  label: '住宿问题',
                  value: 5
                },
                {
                  label: '休闲/娱乐',
                  value: 6
                },
                {
                  label: '其他',
                  value: 7
                },
              ]
            },
            {
              "keyword": "危机性问题处理能力",
              "remark": "",
              "sjskPersonId": '',
              "type": 6,
              "value": [],
              options: [{
                  label: '即时的危机因素',
                  value: 1
                },
                {
                  label: '保护因素',
                  value: 2
                },
                {
                  label: '自我效能',
                  value: 3
                },
                {
                  label: '其他',
                  value: 4
                },
              ]
            }
          ]
        },
        sjskType: [{
            label: '社区戒毒',
            value: 1
          },
          {
            label: '社区康复',
            value: 2
          }
        ],

        sfgj: [{
            label: '需要跟进',
            value: 1
          },
          {
            label: '不需跟进，请说明原因',
            value: 2
          },
        ],
        sfjj: [{
            label: '不需要',
            value: 1
          },
          {
            label: '需要紧急行动，请说明原因',
            value: 2
          }
        ]
      }
    },
    methods: {
      validate() {
        return new Promise((reslove, reject) => {
          this.$refs.form.validate(valid => {
            console.log(valid)
            if(valid) {
              reslove(this.form)
            }
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .step1 {
    ::v-deep .title {
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
</style>
